<script setup lang="ts">
const props = defineProps({
  focusHighlight: {
    type: Boolean,
    default: false,
  },
  cClass: {
    type: String,
    default: '',
  },
  rounded: {
    type: Boolean,
    default: true,
  },
})
const { rounded, focusHighlight, cClass } = toRefs(props)
const isFocus = ref(false)
function handleFocus() {
  isFocus.value = true
}
function handleBlur() {
  isFocus.value = false
}
const containerClass = computed(() => {
  return {
    [cClass.value]: cClass.value,
    'rounded-lg': rounded.value,
    'focus-highlight': isFocus.value && focusHighlight.value,
    'border-1 border-transparent border-solid': !isFocus.value && focusHighlight.value,
  }
})
</script>

<template>
  <view :class="containerClass" class="bg-white">
    <wd-input
      :class="rounded ? 'rounded-lg' : ''"
      v-bind="$attrs"
      @focus="handleFocus"
      @blur="handleBlur"
    >
      <template v-for="(item, key, index) in $slots" :key="index" #[key]>
        <slot :name="key" />
      </template>
    </wd-input>
    <view v-if="$slots.desc" class="mt-[2px] max-w-[290px] px-[15px] pb-[10px]">
      <slot name="desc" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.focus-highlight {
  border: 1px solid #ff5a1f;
}
</style>
